<div id="gradeable-dates">
    <input name="ta_view_start_date" id="date_ta_view" class="date_picker" type="text" value="{{ gradeable.getTaViewStartDate()|date(date_format) }}">
    <label for="date_ta_view">TA Beta Testing Date (visible to TAs)</label>

    <br />


    <div class="electronic_file electronic_file_dates">
        <div class="team_yes team_yes_dates">
            <input name="team_lock_date" id="date_team_lock" class="date_picker" type="text" value="{{ gradeable.getTeamLockDate()|date(date_format) }}">
            <label for="date_team_lock">Team Lock Date (Instructors can still manually manage teams)</label>

            <br />
        </div>

        <input id="date_submit" name="submission_open_date" class="date_picker" type="text" value="{{ gradeable.getSubmissionOpenDate()|date(date_format) }}">
        <label for="date_submit">Submission Open Date (submission available to students)</label>

        <br />

        <div id="due_date_options_container">
            <div>
                <fieldset>
                    <legend>Will this assignment have a due date?</legend>
                    <input id="has_due_date_yes" name="has_due_date" value="true" type="radio" {{ gradeable.hasDueDate() ? 'checked' : '' }}/><label for="has_due_date_yes">Yes</label>
                    <input id="has_due_date_no" name="has_due_date" value="false" type="radio" {{ not gradeable.hasDueDate() ? 'checked' : '' }}/><label for="has_due_date_no">No</label>
                </fieldset>
            </div>

            <div id="due_date_container" {{ gradeable.hasDueDate() ? '' : 'hidden' }}>
                <input id="date_due" name="submission_due_date" class="date_picker" type="text" value="{{ gradeable.getSubmissionDueDate()|date(date_format) }}">
                <label for="date_due">Due Date</label>
            </div>
        </div>
    </div>

    <div class="manual_grading manual_grading_dates">
        <input name="grade_start_date" id="date_grade" class="date_picker" type="text" value="{{ gradeable.getGradeStartDate()|date(date_format) }}">
        <label for="date_grade">TA/Instructor Manual Grading Open Date (grading may begin)</label>

        <br />

        <input name="grade_due_date" id="date_grade_due" class="date_picker" type="text" value="{{ gradeable.getGradeDueDate()|date(date_format) }}">
        <label for="date_grade_due">TA/Instructor Manual Grading Due Date</label>

        <br />
    </div>

    <input name="grade_released_date" id="date_released" class="date_picker" type="text" value="{{ gradeable.getGradeReleasedDate()|date(date_format) }}">
    <label for="date_released">Grades Released Date (grades will be visible to students)</label>

    <br />

    <div class="electronic_file electronic_file_dates">
        <div class="regrade_request_date" {{ regrade_allowed != true or regrade_enabled != true ? 'hidden' : '' }}>
            <input name="regrade_request_date" id="date_regrade_request" class="date_picker" type="text" value="{{ gradeable.getRegradeRequestDate()|date(date_format) }}">
            <label for="date_regrade_request">Grade Inquiry Due Date (Grade Inquiries must be initiated by this date)</label>
        </div>

        <div id="late_days_options_container" {{ gradeable.hasDueDate() and gradeable.isStudentSubmit() ? '' : 'hidden' }}>
            <fieldset>
                <legend>Should submissions be accepted after the due date?</legend>
                <input type="radio" id = "yes_late_submission" name="late_submission_allowed" value="true"
                        {{ action != 'new' and gradeable.isLateSubmissionAllowed() ? 'checked' : '' }}> <label for="yes_late_submission">Yes</label>

                <input type="radio" id = "no_late_submission" name="late_submission_allowed" value ="false"
                        {{ not (action != 'new' and gradeable.isLateSubmissionAllowed()) ? 'checked' :  '' }}> <label for="no_late_submission">No</label>
            </fieldset>
            <div class="yes-late-submission">
                <label for="late_days">How many late days may students use on this assignment?</label>
                <input style="width: 50px" id="late_days" name="late_days" class="int_val" type="text" value="{{ gradeable.getLateDays() }}"/>

                <br />

                <p style="max-width:600px;" id="late-days-message">
                Note: Submissions received after the deadline will be automatically recorded as a zero if late days are not allowed
                    for this assignment (or the student does not have sufficient late days to cover the submission) and no excused
                    absence extension is entered for this student for this gradeable. See
                    <a target=_blank href="http://submitty.org/student/late_days">Late Days & Extensions. <i style="font-style:normal;" class="fa-question-circle"></i></a>
                </p>
            </div>
        </div>
    </div>

    <br />

    <input type="button" class="btn btn-default" value="Show All Dates" id="show_all_dates" onclick="showAllDates()" />
    <input type="button" class="btn btn-primary" value="Hide Irrelevant Dates" id="hide_dates" onclick="hideDates()" hidden/>

    <br />
    <span id="gray_date_warning" hidden>Note: grayed-out dates are for debugging & consistency checks.  These dates are not relevant with your current assignment configuration.</span>
    <div id="timezone-container"><i>Time Zone: {{ timezone_string }}</i></div>
</div>

<script type="text/javascript">
    function showAllDates() {
        $('#gradeable-dates').find('div,input').show();
        $('#gray_date_warning').show();
        $('#hide_dates').show();
        $('#show_all_dates').hide();
    }

    // This hides the dates by calling the event handlers that do that automatically
    function hideDates() {
        $('#gray_date_warning').hide();
        onGradeableTypeChange();
        onTeamAssignmentChange();
        onManualGradingChange();
        onIsRegradeAllowedChange();
        onLateSubmissionAllowedChanged();
        if (onStudentSubmitChange !== undefined) {
            onStudentSubmitChange();
        }
    }

    $(document).ready(function() {
        $('input[name=has_due_date]').change(function() {
            let cont = $('#due_date_container');
            let cont1 = $('#late_days_options_container');
            if($('#has_due_date_no').is(':checked')) {
                cont.hide();
                cont1.hide();
            }
            else {
                cont.show();
                cont1.show();
            }
        });
        flatpickr(".date_picker", {
            plugins: [ShortcutButtonsPlugin(
                    {
                        button: [
                            {
                                label: "Now"
                            },
                            {
                                label: "End of time"
                            }
                        ],
                        label: "or",
                        onClick: (index, fp) => {
                            let date;
                            switch (index) {
                                case 0:
                                    date = new Date();
                                    break;
                                case 1:
                                    date = new Date("9998-01-01 00:00:00");
                                    break;
                            }
                            fp.setDate(date, true);
                        }
                    }
                )],
            allowInput: true,
            enableTime: true,
            enableSeconds: true,
            time_24hr: true,
            dateFormat: "Y-m-d H:i:S"
        });
    });

</script>
